<template>
  <div style="position: relative;width: 100%;height: 100%; ">
    <div class="cjy-moldeTitle" style="">
      选择赠品
    </div>
    <div style="height:20rem;padding:2.2rem  0 3rem 0 ;width: 100% ;position: relative;overflow: hidden">
     <vertical-scroll :lengths="3" ref="translateMain">
        <div style="width: 100%">
          <ul class="cjy-selectLadderMelue">

            <li class="cjy-selectLadderList green-style"
                style="border-bottom: 1px solid lightgrey;border-top: 1px solid lightgrey;max-width: none;width: 100%">
              <label
                style="display: inline-block;width: 100%;overflow: hidden;text-overflow: ellipsis;height: 2rem">
              <span style="position: relative;padding-right: 0.5rem">
              <input style="width: 1rem;height: 1rem;display: inline-block; transform: translatey(50%)"
                     type="radio"
                     name="selectLadderList"
                     :value="-1"
                     v-model="activeIndex"
                     class="aui-checkbox">
              </span>
                不使用优惠
              </label>
            </li>

            <li v-for=" (item, index) in ladderList">

              <!--單獨優惠券-->
              <div class="cjy-selectLadderList cjy-show-Box green-style"
                   style="position: relative;height: 2rem ;padding-left:0.75rem;width: 100%;" v-if="item.couponVO">
                <div style="width: 100%;height: 100%">
                  <label
                    style="display: inline-block;width: 100%;overflow: hidden;text-overflow: ellipsis">
                    <span style="position: relative;padding-right: 0.5rem">
                    <input style="width: 1rem;height: 1rem;display: inline-block; transform: translatey(50%)"
                           type="radio"
                           name="selectLadderList"
                           :value="index"
                           :disabled="item.couponVO.times <= 0"
                           v-model="activeIndex"
                           class="aui-checkbox">
                    </span>
                    {{item.couponVO.couponName}}
                  </label>


                </div>


              </div>
              <!--</showBox>-->


              <showBox :giftDefault="item.giftVO" v-if="item.giftVO" :money="item.addMoney" @refresh="refresh">
                <div class="cjy-selectLadderList green-style" style="position: absolute;">
                  <label
                    class="cjy-overflow"
                    style="display: inline-block;width: 100%;padding-right:0.5rem">
                        <span style="position: relative;padding-right: 0.5rem">
                        <input style="width: 1rem;height: 1rem;display: inline-block; transform: translatey(50%)"
                               type="radio"
                               name="selectLadderList"
                               :value="index"
                               :disabled="item.giftVO.times <= 0"
                               v-model="activeIndex"
                               class="aui-checkbox">
                        </span>
                    {{item.giftVO.giftName}}
                  </label>
                </div>
              </showBox>
            </li>

            <li style="height: 2rem;line-height: 2rem; text-align: left">
                <span style="margin-left:0.5rem;">！礼品有限，送完即止
                </span>
            </li>
          </ul>


        </div>

      </vertical-scroll>
    </div>
  </div>
</template>

<script>
  import VerticalScroll from '@/components/VerticalScroll'
  import showBox from '@/components/CartPullRegular'

  export default {
    data() {
      return {
        selseItem: {},
        selseNum: 1,
        activeIndex: -1,
      }
    },
    components: {
      VerticalScroll,
      showBox
    },

    props: {
      ladderList: {
        type: Array,
        default: () => []
      },
      buyMoreLadderData: {
        type: Object,
        default: () => null
      }
    },
    methods: {
      refresh() {

        this.$refs.translateMain.refresh()
      },

      translateCoupon(couponVO) {

        return {
          giftType: "2",
          giftCouponList: [couponVO],
          giftGoodsList: []
        }

      },
      saveSeleced(index) {
        var selseItem = this.ladderList[index]
        if (!selseItem) {
          return
        }
        selseItem.selseItem = this.selseNum
        this.$store.commit('cjy/CHANGE_SELECT_LADDER_LIST', selseItem)
      },
      initData() {
        var selectLadderList = this.selectLadderList //已选返利阶梯列表
        // 找出可用的赠品
        var ladderList = this.ladderList.filter((item) => {
          var giftVO = item.giftVO
          var couponVO = item.couponVO
          var time
//          判断时候有可赠的次数
          if (giftVO) {
            time = giftVO.times
          } else if (couponVO) {
            time = couponVO.times
          } else {
            time = 0
          }
          return time > 0
        })

        if (selectLadderList && ladderList) {
          // 根据保存数据 判断历史已选的位置
          this.activeIndex = ladderList.findIndex((list) => {
            var giftId = list.giftId
            // 列表是否已经被选取过 是返回true 否则返回false
            return selectLadderList.some((item) => {
                return giftId == item.giftId
              }
            )
          })
        } else {
          this.selseItem = {}
          this.selseNum = 1
          this.activeIndex = -1
        }
      }
    },
    watch: {
      ladderList(data) {

        this.initData()
      },
      activeIndex(data) {
        var ladderList = this.ladderList
        if (data == -1 && ladderList.length > 0) {
          var promId = ladderList[0].promId
          this.$store.commit('cjy/SPLICE_SELECT_LADDER_LIST', promId)
        }
        this.saveSeleced(data)
      }
    },
    computed: {
      selectLadderList() {
        return this.$store.getters['cjy/selectLadderList']
      }
    },
    created() {
      this.initData()
    }

  }
</script>

<style scoped>
  .cjy-moldeTitle {
    text-align: center;
    vertical-align: middle;
    height: 2.2rem;
    line-height: 2.2rem;
    position: absolute;
    width: 100%;
    z-index: 100;
    background: white;
    font-weight: 800;
    font-size: 0.75rem;
  }

  .cjy-selectLadderList {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    white-space: nowrap;
    height: 2rem;
    line-height: 2rem;
    vertical-align: middle;
    text-align: left;
    padding-left: 0.75rem;
  }

  .cjy-show-Box {
    overflow: hidden;
    padding: 0 0.5rem;
    border-bottom: 1px solid gainsboro;
  }

  .cjy-overflow {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
  }

</style>
